<template>
  <div class="register-container">
    <a-card class="register-card" title="用户注册" :bordered="false">
      <a-form
        :model="form"
        :rules="rules"
        @submit="handleSubmit"
        layout="vertical"
      >
        <!-- 用户账号 -->
        <a-form-item label="用户账号" field="account">
          <a-input
            v-model="form.userAccount"
            placeholder="请输入账号"
            allow-clear
            class="custom-input"
          >
            <template #prefix>
              <icon-user />
            </template>
          </a-input>
        </a-form-item>

        <!-- 用户密码 -->
        <a-form-item label="用户密码" field="password">
          <a-input-password
            v-model="form.userPassword"
            placeholder="请输入密码"
            allow-clear
            class="custom-input"
          >
            <template #prefix>
              <icon-lock />
            </template>
          </a-input-password>
        </a-form-item>

        <!-- 确认密码 -->
        <a-form-item label="确认密码" field="confirmPassword">
          <a-input-password
            v-model="form.checkPassword"
            placeholder="请再次输入密码"
            allow-clear
            class="custom-input"
          >
            <template #prefix>
              <icon-lock />
            </template>
          </a-input-password>
        </a-form-item>

        <!-- 提交按钮 -->
        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            long
            class="submit-btn"
            :loading="loading"
          >
            立即注册
          </a-button>
        </a-form-item>

        <!-- 底部返回链接 -->
        <div class="footer-link">
          已有账号？
          <a-link @click="goToLogin" hoverable>立即登录</a-link>
        </div>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { Message } from "@arco-design/web-vue";
import { IconUser, IconLock } from "@arco-design/web-vue/es/icon";
import { useRouter } from "vue-router";
import { UserControllerService } from "../../../generated";
const form = reactive({
  userAccount: "",
  userPassword: "",
  checkPassword: "",
});
const router = useRouter();
const goToLogin = () => {
  router.push("/user/login");
};
const loading = ref(false);

const validateConfirmPassword = (value, callback) => {
  if (value !== form.password) {
    callback("两次输入的密码不一致");
  } else {
    callback();
  }
};

const rules = {
  userAccount: [
    { required: true, message: "账号不能为空" },
    { minLength: 5, message: "账号长度不能小于5位" },
  ],
  userPassword: [
    { required: true, message: "密码不能为空" },
    { minLength: 8, message: "密码长度不能小于8位" },
  ],
  checkPassword: [
    { required: true, message: "请确认密码" },
    { validator: validateConfirmPassword },
  ],
};

const handleSubmit = async ({ values, errors }) => {
  if (errors) return;
  console.log(values);
  try {
    loading.value = true;
    // 这里调用注册接口
    // await registerApi(values);
    const res = await UserControllerService.userRegisterUsingPost({
      userAccount: values.userAccount,
      userPassword: values.userPassword,
      checkPassword: values.checkPassword,
    });
    if (res.code === 0) {
      Message.success("注册成功！");
      router.push("/user/login");
    } else {
      Message.error(res.message);
    }
  } catch (error) {
    Message.error(error.message);
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.register-card {
  margin-bottom: 150px;
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  box-shadow: 0 -10px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.register-card:hover {
  transform: translateY(-5px);
}

:deep(.arco-card-header) {
  border-bottom: none;
  padding: 2rem 2rem 1rem;
}

:deep(.arco-form-item-label-col) {
  font-weight: 500;
  color: #2c3e50;
}

.custom-input {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.custom-input:hover {
  border-color: #3498db;
}

.custom-input:focus-within {
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.submit-btn {
  margin-top: 1rem;
  border-radius: 8px;
  height: 44px;
  font-weight: 500;
  background: #3498db;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background: #2980b9;
  transform: translateY(-1px);
}

:deep(.arco-input-prefix) {
  margin-right: 8px;
  color: #7f8c8d;
}
</style>
